<template>
  <view class="facility_inspections_box">
    <image class="cover" :src="props.img" mode="scaleToFill" />

    <view class="content">
      <view class="title">{{ props.msg }}</view>

      <view class="list">
        <view
          class="item"
          v-for="(item, index) in levelList"
          :key="index"
          @click="onSelected(index)"
        >
          <view class="text">{{ item.msg }}</view>
          <uni-icons
            class="icon"
            :type="chooseIndex == index ? 'checkbox-filled' : 'circle'"
            :color="props.disabled ? 'rgb(152, 147, 147)' : (chooseIndex == index ? 'rgb(41, 201, 79)' : '')"
            size="20"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<!-- 资产设施确认 -->
<script lang="ts" setup>
import { ref, watch } from 'vue'

//接受父组件事件
const props = defineProps({
  /**
   * 描述
   */
  msg: {
    type: String,
    default: '',
  },
  /**
   * 唯一标识
   */
  id: {
    type: Number,
    default: 0,
  },
  /**
   * 预览图
   */
  img: {
    type: String,
    default: '../../../static/images/common/img_load.svg',
  },
  /**
   * 选中下标
   */
  index: {
    type: Number,
    default: -1,
  },
  /**
   * 是否禁用
   */
  disabled: {
    type: Boolean,
    default: false,
  },
})

//自定义事件
const emit = defineEmits<{
  /**
   * 选中事件
   * @param id：选项id
   * @param state：选中等级状态
   */
  (e: 'onSelected', data: { id: number; state: number }): void
}>()

//等级评定
const levelList = ref([
  { code: 0, msg: '完好' },
  { code: 1, msg: '老旧' },
  { code: 2, msg: '损坏' },
])

//当前选中的选项下标
const chooseIndex = ref(props.index)

//监听选中下标变化
watch(
  () => props.index,
  (newValue, oldValue) => {
    chooseIndex.value = newValue
  }
)

/**
 * 点击选中事件
 * @param index: 选中的下标
 */
const onSelected = (index: number) => {
  if (props.disabled) {
    return
  }
  chooseIndex.value = index
  emit('onSelected', { id: props.id, state: levelList.value[index].code })
}
</script>

<style scoped lang="scss">
.facility_inspections_box {
  display: flex;
  align-items: flex-end;
  margin-bottom: 40rpx;

  .cover {
    width: 200rpx !important;
    height: 200rpx !important;
    border-radius: 10rpx;
    color: rgb(152, 147, 147);
  }

  .content {
    display: flex;
    flex-direction: column;
    min-height: 120rpx;
    padding-left: 16rpx;
    width: calc(100% - 216rpx);

    .title {
      font-size: 32rpx;
      font-weight: 700;
      margin-bottom: auto;
    }

    .list {
      display: flex;
      align-items: center;

      .item {
        font-size: 30rpx;
        padding-right: 30rpx;
        display: flex;
        align-items: center;

        .icon {
          transform: translateY(2rpx);
        }
      }
    }
  }
}
</style>
